<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="referrer" content="no-referrer">
  <meta name="referrer" content="never">

  <title>TUCAO-NEWS</title>

  <link rel="stylesheet" href="../css/news.css" media="screen" type="text/css">
  <!--字体图标库-->
  <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <!--bootstrap-->
  <link rel="stylesheet" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">
  <!--导航球-->
  <link rel="stylesheet" href="../lib/css/gooey.min.css">
  <!--滚动条-->
  <link rel="stylesheet" href="../lib/css/scrollBar.css">
  <!--消息提示组件 CSS-->
  <link rel="stylesheet" href="../lib/spop-gh-pages/dist/spop.css">
  <!--分页-->
  <link rel="stylesheet" href="../lib/css/jquery.pagination.css">
  <!--轮播图-->
  <link rel="stylesheet" href="../lib/css/swiper.min.css">
  <!--左侧次导航-->
  <link rel="stylesheet" type="text/css" href="../lib/css/nav.css">
  <style>
    body {
      background:#eee;
      font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
      font-size:14px;
      color:#000;
      margin:0;
      padding:0;
    }
    #banner {
      z-index: 999;
      width:100%;
      height:450px;
      margin-top: 20px;
      overflow:hidden;
      position:relative;
    }
    .swiper-container {
      width:830px;
      height:450px;
      position:absolute;
      left:-630px;
      margin-left:50%;
    }
    .swiper-slide .detail {
      height:90px;
      background:rgba(0,0,0,.7);
      /*margin-top: 5px;*/
      position:absolute;
      width:100%;
      bottom:-10px;
      color:#fff;
      opacity:0;
      transition:opacity .3s .3s;
    }
    .swiper-slide-active .detail {
      opacity:1;
    }
    .swiper-slide .detail h3 {
      width:830px;
      margin:15px 2px 0;
    }
    .swiper-slide .detail p {
      width:830px;
      margin:3px 2px 0;
    }
    .swiper-slide .detail p span {
      width:650px;
      display:block;
    }
    .effect1 img {
      transform:scale(1.25,1.25) translate(10%,10%);
      transform:scale(1.1,1.1) translate(4.545%,4.545%);
    }
    .leftUp img {
      -webkit-animation-name:leftUp;
      animation-name:leftUp;
    }
    @-webkit-keyframes leftUp {
      0% {
        transform:scale(1.1,1.1) translate(4.545%,4.545%);
      }
      100% {
        transform:scale(1.1,1.1) translate(-4.545%,-4.545%);
      }
    }
    @keyframes leftUp {
      0% {
        transform:scale(1.1,1.1) translate(4.545%,4.545%);
      }
      100% {
        transform:scale(1.1,1.1) translate(-4.545%,-4.545%);
      }
    }
    .moveRight img {
      -webkit-animation-name:moveRight;
      animation-name:moveRight;
    }
    @-webkit-keyframes moveRight {
      0% {
        transform:scale(1.1,1.1) translate(-4.545%,0);
      }
      100% {
        transform:scale(1.1,1.1) translate(4.545%,0);
      }
    }
    @keyframes moveRight {
      0% {
        transform:scale(1.1,1.1) translate(-4.545%,0);
      }
      100% {
        transform:scale(1.1,1.1) translate(4.545%,0);
      }
    }
    .moveDown img {
      -webkit-animation-name:moveDown;
      animation-name:moveDown;
    }
    @-webkit-keyframes moveDown {
      0% {
        transform:scale(1.1,1.1) translate(0,-4.545%);
      }
      100% {
        transform:scale(1.1,1.1) translate(0,4.545%);
      }
    }
    @keyframes moveDown {
      0% {
        transform:scale(1.1,1.1) translate(0,-4.545%);
      }
      100% {
        transform:scale(1.1,1.1) translate(0,4.545%);
      }
    }
    .centerBig img {
      -webkit-animation-name:centerBig;
      animation-name:centerBig;
    }
    @-webkit-keyframes centerBig {
      100% {
        transform:scale(1.1,1.1);
      }
    }
    @keyframes centerBig {
      100% {
        transform:scale(1.1,1.1);
      }
    }
    .rightDownBig img {
      -webkit-animation-name:rightDownBig;
      animation-name:rightDownBig;
    }
    @-webkit-keyframes rightDownBig {
      100% {
        transform:scale(1.1,1.1) translate(4%,4%);
      }
    }
    @keyframes rightDownBig {
      100% {
        transform:scale(1.1,1.1) translate(4%,4%);
      }
    }
    .swiper-slide img {
      height: 430px;
      width: 800px;
      animation-duration:5s;
      animation-timing-function:linear;
      animation-fill-mode:forwards;
      -webkit-animation-duration:5s;
      -webkit-animation-timing-function:linear;
      -webkit-animation-fill-mode:forwards;
    }
    .swiper-pagination {
      bottom:15px;
      left:850px;
    }
    .swiper-pagination-bullet {
      width:20px;
      height:20px;
      background:#fff;
      margin:0 5px;
    }
  </style>
  <!-- 轮播图end   -->
</head>

<body onload="run();">
<!--整体布局放在雨滴背景上-->
<div style="position: relative;z-index: 9999">
  <!--右侧 导航栏-->
  <div class="box-right">
    <nav id="gooey">
      <input type="checkbox" class="menu-open" name="menu-open" id="menu-open"/>

      <label class="open-button" for="menu-open">
        <span class="burger burger-1"></span>
        <span class="burger burger-2"></span>
        <span class="burger burger-3"></span>
      </label>

      <a href="news.html" class="gooey-menu-item" title="首页">
        <i class="fa fa-home"></i>
      </a>
      <a href="tucao-area.html" class="gooey-menu-item" title="吐槽墙">
        <i class="fa fa-comments-o"></i>
      </a>
      <a href="heart-area.html" class="gooey-menu-item" title="心灵小组">
        <i class="fa fa-sun-o"></i>
      </a>
      <a href="manage-my.html" class="gooey-menu-item" title="管理我的">
        <i class="fa fa-user"></i>
      </a>
    </nav>
  </div>
  <!--右侧 导航栏 end-->

  <!--左下角导航栏-->
  <div class="leftNav-item">
    <ul>
      <li>
        <i class="fa fa-reply-all"></i>
        <a href="welcome-after.html" class="rota">返回</a>
      </li>
    </ul>
  </div>

  <!-- 轮播图-->
  <div id="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide rightDownBig">
          <img src="http://localhost:2081/picture/one?id=1" />
          <div class="detail">
            <h3 id="imgTitle1"></h3>
            <p>
              <span id="imgContent1"></span>
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="http://localhost:2081/picture/one?id=2" />
          <div class="detail">
            <h3 id="imgTitle2"></h3>
            <p>
              <span id="imgContent2"></span></p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="http://localhost:2081/picture/one?id=3" />
          <div class="detail">
            <h3 id="imgTitle3"></h3>
            <p>
              <span id="imgContent3"></span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- 热搜榜 -->
  <div class="wrap">
    <div id="left">
      <p id="title1">头条速递</p>
      <div class="container1">
        <!--第一条新闻-->
        <div class="box">
<!--          src-->
          <img id="newsImg1">
          <div class="txt">
            <span class="badgeTop">TOP1</span>
<!--            href-->
            <a id="newsHref1">
              <span class="topic">
                #<span id="newsTitle1" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom1" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime1" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第二条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg2">
          <div class="txt">
            <span class="badgeTop">TOP2</span>
            <!--            href-->
            <a id="newsHref2">
              <span class="topic">
                #<span id="newsTitle2" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom2" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime2" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第三条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg3">
          <div class="txt">
            <span class="badgeTop">TOP3</span>
            <!--            href-->
            <a id="newsHref3">
              <span class="topic">
                #<span id="newsTitle3" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom3" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime3" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第四条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg4">
          <div class="txt">
            <span class="badgeTop">TOP4</span>
            <!--            href-->
            <a id="newsHref4">
              <span class="topic">
                #<span id="newsTitle4" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom4" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime4" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第五条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg5">
          <div class="txt">
            <span class="badgeTop">TOP5</span>
            <!--            href-->
            <a id="newsHref5">
              <span class="topic">
                #<span id="newsTitle5" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom5" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime5" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第六条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg6">
          <div class="txt">
            <span class="badgeTop">TOP6</span>
            <!--            href-->
            <a id="newsHref6">
              <span class="topic">
                #<span id="newsTitle6" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom6" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime6" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第七条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg7">
          <div class="txt">
            <span class="badgeTop">TOP7</span>
            <!--            href-->
            <a id="newsHref7">
              <span class="topic">
                #<span id="newsTitle7" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom7" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime7" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第八条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg8">
          <div class="txt">
            <span class="badgeTop">TOP8</span>
            <!--            href-->
            <a id="newsHref8">
              <span class="topic">
                #<span id="newsTitle8" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom8" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime8" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第九条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg9">
          <div class="txt">
            <span class="badgeTop">TOP9</span>
            <!--            href-->
            <a id="newsHref9">
              <span class="topic">
                #<span id="newsTitle9" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom9" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime9" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
        <!--第十条新闻-->
        <div class="box">
          <!--          src-->
          <img id="newsImg10">
          <div class="txt">
            <span class="badgeTop">TOP10</span>
            <!--            href-->
            <a id="newsHref10">
              <span class="topic">
                #<span id="newsTitle10" class="topic"></span>#
              </span>
              <!--不可删除 否则图片会横向放大-->
              <div class="subtitle"></div>
            </a>
            <div class="tags">
              <p>
                &nbsp;&nbsp;<span class="number">出版社:&nbsp;</span><span id="newsFrom10" class="number"></span></span>
                <br>
                &nbsp;&nbsp;<span class="number">发表日期:&nbsp;<span id="newsTime10" class="number"></span></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 热搜榜 end -->

  <!--公告栏内容展示-->
  <div class="tucao-content">
    <div class="tucao">
      <div class="news-title">
        <span style="position: fixed;width: 1080px;height:40px;margin-left: 10px">
          吐槽墙公告栏
        </span>
      </div>
      <!--公告栏内容-->
      <div class="news-content">
        <span style="position: fixed;width: 1080px;height: 100px;margin-bottom: 5px;margin-left: 10px">
          <div>1、<span id="notice1"></span>;</div>
          <div>2、<span id="notice2"></span>;</div>
          <div>3、<span id="notice3"></span>;</div>
          <div>4、<span id="notice4"></span>;</div>
          <div>5、<span id="notice5"></span>;</div>
        </span>
      </div>
      <!--底部时间信息-->
      <div class="news-bottom">
        <div class="left">
          <div class="time">
            <span id="noticeTime" style="float: left;margin-top: 15px;margin-left: 15px"></span>
          </div>
        </div>
        <div class="right">
          <span style="float: right;margin-top: 10px;">吐槽平台管理员发布</span>
        </div>
      </div>
    </div>
  </div>

</div>

<!--背景 下雨特效-->
<img id="background" alt="background" src="" style="height: 100%;width: 100%"/>

<!--导入JS-->
<!--jquery 1.11.0-->
<script src="../lib/js/jquery-1.11.0.min.js"></script>
<!--右侧导航球-->
<script src="../lib/js/gooey.min.js"></script>
<!--Bootstrap-->
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--滚动条-->
<script src="../lib/js/scrollBar.js"></script>
<!--雨玻璃背景-->
<script src="../lib/js/rainyday.min.js"></script>
<!--消息提示组件-->
<script src="../lib/spop-gh-pages/dist/spop.js"></script>
<!--分页-->
<script src="../lib/js/jquery.pagination.min.js"></script>
<!--左侧 次导航-->
<script type="text/javascript" src="../lib/js/nav.js"></script>
<!--轮播图-->
<script src="../lib/js/swiper.min.js"></script>
<script>
  trList = ['leftUp', 'moveRight', 'moveDown', 'centerBig', 'rightDownBig'];
  var swiper = new Swiper('.swiper-container', {
    speed: 500,
    autoplay: 4400,
    autoplayDisableOnInteraction: false,
    effect: 'fade',    pagination: '.swiper-pagination',
    paginationClickable: true,
    onSlideChangeStart: function(swiper) {
      nextSlide = swiper.slides.eq(swiper.activeIndex);
      nextSlide.addClass(trList[Math.floor(Math.random() * 5)]);
    },
    onSlideChangeEnd: function(swiper) {
      prevSlide = swiper.slides[swiper.previousIndex];
      prevSlide.className = "swiper-slide";
    },
  });
</script>
<!--导入JS-->
<script src="../js/news.js"></script>


</body>

</html>